<template>
    <div class="register">
        <h3 class="title">用户注册</h3>
        <div class="from">
            <input type="text" v-model="nickname" placeholder="昵称" maxlength="11">
            <input type="text" v-model="username" placeholder="用户名" maxlength="11">
            <input type="password" v-model="password" placeholder="密码">
            <button :class="buttonBg" @click="onRegister">注册</button>
        </div>
        <div class="bottom">
            <span @click="onLogin">去登录</span>
        </div>
        <div class="address">注册同意用户协议</div>
    </div>
</template>

<script>
export default {
    name: 'PageRegister',
    data() {
        return {
            nickname: '',
            username: '',
            password: '',
        }
    },
    methods: {
        onRegister() {
            if(this.nickname.length >= 2 && this.username.length >= 6 && this.password.length >= 6) {
                var obj = {
                    type: 'register',
                    username: this.username,
                    password: this.password,
                    nickname: this.nickname
                }
                var data = JSON.stringify(obj);
                this.ws.send(data);
                // this.$post('register.php',{
                //     username: this.username,
                //     password: this.password,
                //     nickname: this.nickname
                // })
                // .then((res) => {
                //     this.ToastClear()
                //     if(res.code == 200) {
                //         this.Toast(`${res.desc}`,'icon-chenggong',800);
                //         setTimeout(() => {
                //             this.$router.push('/login')
                //         },500)
                //     }
                // })
            }
        },
        onLogin() {
            this.$router.push('/login')
        }
    },
    computed: {
        buttonBg() {
            return this.nickname.length >= 2 && this.username.length >= 6 && this.password.length >= 6 ? 'active' : ''
        }
    }
}
</script>

<style lang="scss" scoped>
.register{
    width:100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    padding:2.5rem;
    background:#fff;
    .title{
        font-size:26px;
        color:#333;
        font-weight: 600;
        letter-spacing:0.125rem;
    }
    .from{
        margin-top:3.75rem;
        input{
            width:100%;
            border:0;
            font-size:1.125rem;
            padding-bottom:0.5rem;
            margin-bottom:3.125rem;
            outline: none;
            border-bottom:1px solid #EBEBEB;
            &:nth-child(3){
                margin-bottom:1.25rem;
            }
        }
        button{
            width:100%;
            border:0;
            outline: none;
            background:#B3DBFF;
            color:#fff;
            font-size:1.125rem;
            padding:0.625rem 0;
            border-radius:0.3125rem;
            &.active{
                background:#0084FF;
            }
        }
    }
    .bottom{
        margin-top:1.25rem;
        text-align: left;
        color:#444;
        font-size:0.875rem;
    }
    .address{
        position: absolute;
        bottom:1.25rem;
        left:0;
        right:0;
        color:#999;
        font-size:0.875rem;
        text-align: center;
    }
}
</style>